<template>
	<view class="bigBox">
		<view class="box">
			<!-- back -->
			<!-- #ifndef APP || H5 -->
			<camera 
				id="camera" ref="camera"
				:device-position="devicePosition" 
				flash="off" @error="error" class="facevideo"
			></camera>
			<!-- #endif -->
			<view class="cover-box">
				<view class="center">
					<span v-if="type != 3"></span>
					<span v-if="type != 3"></span>
					<span v-if="type != 3"></span>
					<span v-if="type != 3"></span>
					<view class="loading" v-show="fontShow">{{fontMes}}</view>
				</view>
				<view class="bottom">
					<view class="btn-box">
						<view class="btn" @click="goBack">返回</view>
						<view class="camera" @click="getPictur">
							<view class="cemera-btn"></view>
						</view>
						<view class="btn" @click="selectPhoto">相册</view>
					</view>
				</view>
				<view style="position: absolute;top: 100upx;left: 50upx;text-align: center;" @click="devicePhoto" v-if="type == 3">
					<view class="iconfont icon-xiangji" style="font-size: 60upx;color: #F8F7F4;" />
					<view style="font-size: 24upx;color: #F8F7F4;">切换摄像头</view>
				</view>
			</view>
			<image :src="src" v-show="src" class="src-image"></image>
		</view>
	</view>
</template>

<script>
	import { ocrIdcard } from '@/api/user.js';
	import { pathToBase64, base64ToPath } from '@/utils/image-tools.js'
	export default {
		data() {
			return {
				src:'',
				opt:{},
				type:'face',
				fontShow:false,
				fontMes:'拍摄中...',
				devicePosition: 'back',
			}
		},
		onLoad(opt) {
			this.opt = opt
			this.type = opt.type;
			this.real_name = opt.real_name || '';
			this.card_id = opt.card_id || '';
		},
		methods: {
			//h5拍照
			webPictur() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log(res);
					}
				});
			},
			//拍照
			getPictur() {
				// #ifdef H5
					this.selectPhoto()
				// #endif
				
				// #ifndef APP || H5
				var  that = this;
				this.fontShow = true;
				const camera = uni.createCameraContext('camera');
				// const camera = my.createCameraContext('camera')
				camera.takePhoto({
					quality: 'high',
					success: function(mes) {
						that.src = mes.tempImagePath
						that.cardOcr(mes.tempImagePath)
					},
					fail: function(err) {
						that.reGetPictur()
						that.$util.Tips({ title: '拍照失败' });
					}
				})
				// #endif
			},
			//重拍
			reGetPictur(){
				this.src = '';
				this.fontMes='拍摄中...'
				this.fontShow = false;
			},
			devicePhoto() {
				this.devicePosition = this.devicePosition == 'back' ? 'front' : 'back'
			},
			//相册选择文件
			selectPhoto(){
			  const that = this; 
			  this.fontShow = true;
			  this.fontMes='选择相册中...'
			  uni.chooseImage({  
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album'],
				success: function (res) {  
					const tempFilePaths = res.tempFilePaths;  
					that.cardOcr(tempFilePaths[0]);
				},
				fail: function(err) {
					that.reGetPictur()
				}
			  });  
			},
			//证件识别
			cardOcr(path){
				const that = this;
				this.fontMes = '正在验证...'
				pathToBase64(path).then(base64 => {
					// base64 = base64.replace(/^data:image\/\w+;base64,/, "")
					uni.$emit('isUpdateCard', { type: that.type, base64 })
					this.goBack()
				})
				/* if(this.type == 3) {
					this.$util.uploadImgs('upload/image', path, (res) => {
						if(res.status == 200) {
							uni.$emit('isUpdateCard', { halfImg: res.data.url })
							this.goBack()
						} else { this.$util.Tips({ title: res.msg }) }
					})
				} else {
					let that = this;
					this.fontMes = '正在验证...'
					pathToBase64(path).then(base64 => {
						base64 = base64.replace(/^data:image\/\w+;base64,/, "")
						var param = {}
						that.type == 1
							? param['infoImg'] = base64
							: param['emblemImg'] = base64
						ocrIdcard(param).then(res=>{
							if(res.status==200){
								if(that.type == 1){
									if(res.data.name != that.real_name || res.data.idNo!=that.card_id){
										that.reGetPictur()
										that.$util.Tips({ title: '验证失败' });
										return 
									}
								}
								// 判断身份证是否在有效期
								if(that.type == 2 && res.data.validityPeriod) {
									let startDate = new Date(res.data.validityPeriod.split('-')[0]).getTime()
									let endDate = new Date(res.data.validityPeriod.split('-')[1]).getTime()
									let nowDate = new Date().getTime()
									if (nowDate < startDate || nowDate > endDate) {
										that.reGetPictur()
										that.$util.Tips({title: '身份证已过期'});
										return
									}
								}
								//正常处理逻辑
								var data_ = Object.fromEntries(
									Object.entries(res.data).filter(([key,value])=>value!=null)	  
								);
								uni.$emit('isUpdateCard', data_)
								that.goBack()
							}else{
								that.reGetPictur()
								that.$util.Tips({ title: res.msg });
							}
						}).catch(error=>{
							that.reGetPictur()
							that.$util.Tips({ title: error });
						})
					}).catch(error => {
						that.reGetPictur()
						that.$util.Tips({ title: error });
					})
				} */
			},
			error(e){ console.log(e.detail) },
			goBack(){
        // 苹果手机
        // 加上延迟，解决ios手机连续返回2个页面的问题
        if (uni.getSystemInfoSync().platform == 'ios') {
          uni.showLoading({
            title: '上传中',
            mask: true
          })
          setTimeout(()=>{
            uni.hideLoading()
            uni.navigateBack({ delta: 1 })
          },1000)
        }else{
          uni.navigateBack({ delta: 1 })
        }
      }
		},
	}
</script>

<style>
	.bigBox {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}

	.box {
		width: 100%;
		height: 100%;
		position: relative;
		background-color: #717171;
	}

	.cover-box {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 20;
		top:0rpx;
		left:0rpx;
	}

	.facevideo {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 10;
	}
	#aa {
		position: absolute;
		left: 0;
		top: 50000px;
		width: 5000px;
		height: 5000px;
		z-index: 10;
		border: 1px solid #ff0024;
		/* opacity: 0; */
	}

	.center {
		width: 65vw;
		height: 102.7vw;
		box-sizing: content-box;
		position: relative;
		margin-left:17.5vw;
		margin-top:calc((100vh - 102.7vw) / 2);
	}
	.center span{
		width:40rpx;
		height:40rpx;
		
	}
	.center span:nth-child(1) {
		position: absolute;
		left: -5rpx;
		top: -5rpx;
		padding: 15rpx;
		border-style: solid;
		border-color: #fff;
		border-width: 5rpx 0 0 5rpx;
		border-radius: 30rpx 0 0rpx 0rpx;
	}

	.center span:nth-child(2) {
		position: absolute;
		right: -5rpx;
		top: -5rpx;
		padding: 15rpx;
		border-style: solid;
		border-color: #fff;
		border-width: 5rpx 5rpx 0 0;
		border-radius: 0 30rpx 0rpx 0rpx;
	}

	.center span:nth-child(3) {
		position: absolute;
		right: -5rpx;
		bottom: -5rpx;
		padding: 15rpx;
		border-style: solid;
		border-color: #fff;
		border-width: 0 5rpx 5rpx 0;
		border-radius: 0 0 30rpx 0rpx;
	}

	.center span:nth-child(4) {
		position: absolute;
		left: -5rpx;
		bottom: -5rpx;
		padding: 15rpx;
		border-style: solid;
		border-color: #fff;
		border-width: 0 0 5rpx 5rpx;
		border-radius: 0 0 0rpx 30rpx;
	}
	.bottom{
		height: 146rpx;
		width: 100%;
		background: rgba(0, 0, 0, 0.5);
		position:fixed;
		bottom:0rpx;
		left:0rpx;
	}

	.img-box {
		position: absolute;
		z-index: 20;
		width: 100%;
		height: 100%;
	}

	.img {
		width: 300px;
		height: 475px;
	}
	.loading{
		position: absolute;
		left: 5rpx;
		top: 5rpx;
		width: calc(100% - 10rpx);
		height: calc(100% - 10rpx);
		background: rgba(0,0,0,0.5);
		z-index: 2000;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		border-radius: 30rpx;
	}
	.btn-box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.camera{
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 90%;
		border: 1px solid #fff;
	}
	.cemera-btn{
		width: 80%;
		height: 80%;
		background: #fff;
		border-radius: 90%;
		margin-left: -1px;
		margin-top:1px;
	}
	.btn{
		color:#fff;
		font-size: 30rpx;
	}
	.src-image{
		position: absolute;
		width:100%;
		height:100%;
		left:0rpx;
		top:0rpx;
		z-index:15;
	}
</style>